import React, { Component } from 'react'
import {
  Route,
  Link,
  Routes,
  NavLink,
  Navigate,
  useNavigate,
  useRoutes,
} from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import News from './pages/News'
import Message from './pages/Message'
import Detail from './pages/Detail'
// import Demo from './pages/Demo'
export default function App() {
  const navigate = useNavigate()
  // state = {
  //   isNav: false,
  // }

  return (
    <div>
      <button
        onClick={() => {
          // this.setState({
          //   isNav: true,
          // })
          navigate('/about/1?name=zs&age=18', {
            replace: true, // 替换历史记录
            state: { name: 'zs' }, //要传递About的数据
          })
        }}
      >
        使用Navigate
      </button>
      {/* {this.state.isNav && <Navigate to="/about" ></Navigate>} */}
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink
              style={({ isActive }) => {
                // 如果选中的当前的这个按钮,则isActive为true,否则为false
                return isActive
                  ? { backgroundColor: 'pink', color: 'yellow' }
                  : undefined
              }}
              to="/about"
            >
              About
            </NavLink>
            <NavLink
              className={({ isActive }) => {
                return isActive ? 'xxx' : ''
              }}
              to="/home"
              end
            >
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* <Home></Home>
                <About></About> */}
              {useRoutes([
                {
                  path: '/home',
                  element: <Home></Home>,
                  children: [
                    {
                      path: 'news',
                      element: <News></News>,
                    },
                    {
                      path: 'message',
                      element: <Message></Message>,
                      children: [
                        {
                          path: 'detail/:id',
                          element: <Detail></Detail>,
                        },
                      ],
                    },
                  ],
                },
                {
                  path: '/about',
                  element: <About></About>,
                },
              ])}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
